<template>
  <div>
    <h2>事件绑定指令</h2>
    <!-- 事件绑定指令语法: v-on:事件名="处理程序"  v-on:可以简化成@ -->
    <p>{{ age }}</p>
    <!-- 事件处理程序,如果代码非常简单,直接写到<template>这个区域即可 -->
    <!-- <button v-on:事件名='处理程序'></button> -->
    <!-- <button :@事件名='处理程序'></button> -->
    <!-- 处理程序,代码只能使用vue中定义好的data数据或者methods方法 -->
    <button @click="age++">+1</button>
    <!-- 时间处理程序,如果代码非常多,可以使用方法,方法必须定义到和data平级的methods中 -->
    <button @click="changeAge">按钮</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      age: 20,
    };
  },
  // methods是用来存储方法的
  methods: {
    changeAge() {
      // vue中,找data数据,methods方法,都是通过this直接找(这是vue中固定的语法)
      this.age--;
      console.log(123);
    },
  },
};
</script>

<style>
</style>
